<!DOCTYPE html>
<html>

	<head>
		<title>一润魔方</title>
		<link href="../login/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<!-- Custom Theme files -->
		<script src="../login/js/jquery.min.js"></script>
		<!--theme-style-->
		<link href="../login/css/style.css" rel="stylesheet" type="text/css" media="all" />
		<!--//theme-style-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<script type="text/javascript" src="../login/js/move-top.js"></script>
		<script type="text/javascript" src="../login/js/easing.js"></script>
		<!-- 引入 ECharts 文件 -->
		<script src="../login/js/echarts.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event) {
					event.preventDefault();
					$('html,body').animate({
						scrollTop: $(this.hash).offset().top
					}, 1000);
				});
			});
		</script>

		<link href='../login/css/fontLato.css'>
		<link href='../login/css/fontMuli.css'>
	</head>

	<body>
		<!--header-->
		<div class="header" id="header">
			<div class="container">
				<div class="nav-top">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
						<div class="navbar-brand logo ">
							<h1><a href="../main/main.html">一润魔方 </a></h1>
						</div>
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse nav-wil links" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav ">
							<li>
								<a href="javascript:void(0);">综合看板</a><span></span> </li>
							<li>
								<a href="javascript:void(0);">商机看板 </a><span></span></li>
							<li>
								<a href="javascript:void(0);">资金看板 </a><span></span></li>

							<li>
								<a href="javascript:void(0);">信用看板</a><span></span></li>
							<li>
								<a href="javascript:void(0);">销售地图</a>
							</li>
							<li>
								<a href="javascript:void(0);">防渎职监控</a>
							</li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<!-- /.navbar-collapse -->
				</div>
			</div>
		</div>

		<!--content-->
		<div class="service" id="services">
			<div class="container">
				<div class="about-w3l">
					<h3>资金看板</h3>
					<div class="about-t">
						<b></b>
						<b class="line"></b>
					</div>
				</div>
				<div class="service-head">
					<div class="col-md-3 w3ls ">
						<div class=" ser-grid ser-grid1 ">
							<div class=" hi-icon-effect-7 hi-icon-effect-7a">
								<i class="glyphicon glyphicon-user hi-icon "> </i>
							</div>
							<h3>剩余金额</h3>
							<h3 class="data" name="accountBalance">0</h3>
						</div>
					</div>
					<div class="col-md-3 w3ls">
						<div class=" ser-grid ser-grid2 ">
							<div class=" hi-icon-effect-7 hi-icon-effect-7a">
								<i class="glyphicon glyphicon-cog hi-icon "> </i>
							</div>
							<h3>已贷出金额</h3>
							<h3 class="data" name="accountLoan">0</h3>
						</div>
					</div>
					<div class="col-md-3 w3ls ">
						<div class=" ser-grid ">
							<div class=" hi-icon-effect-7 hi-icon-effect-7a">
								<i class="glyphicon glyphicon-leaf hi-icon "> </i>
							</div>
							<h3>账户总金额</h3>
							<h3 class="data" name="accountAmount">0</h3>
						</div>
					</div>
					<!--<div class="col-md-3 w3ls ">
						<div class=" ser-grid ser-grid3 ">
							<div class=" hi-icon-effect-7 hi-icon-effect-7a">
								<i class="glyphicon glyphicon-piggy-bank hi-icon"> </i>
							</div>
							<h3>预估余额(万元)</h3>
							<h3>0</h3>
						</div>
					</div>-->
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>

		<!-- 为ECharts准备一个具备大小（宽高）的Dom end-->

		<!-- 为ECharts begin-->
		<div id="main0" style="height:400px"></div>
		<!-- 为ECharts end-->

		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div class="team" id="main1" style="height:400px"></div>

		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<!--<div class="team" id="main2" style="height:400px"></div>-->
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart2 = echarts.init(document.getElementById('main2'));

			// 指定图表的配置项和数据
			//app.title = '嵌套环形图';

			var option = {
				color: ['#3398DB'],
				title: {
					text: '近期收款计划(万元)',
					subtext: '一润供应链'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['收款']
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					data: ['代采', '质押', '运费保理', '动产质押'],
					axisTick: {
						alignWithLabel: true
					}
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
					name: '收款',
					type: 'bar',
					barWidth: '60%',
					data: [100, 252, 200, 334]
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart2.setOption(option);
		</script>

		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<!--<div class="team" id="main3" style="height:600px"></div>-->
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart3 = echarts.init(document.getElementById('main3'));

			// 指定图表的配置项和数据
			//app.title = '嵌套环形图';

			var option = {
				title: {
					text: '资金流入类型占比',
					subtext: '一润供应链',
					x: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: ['票据汇兑流入', '融资收入', '借款', '营业外收入', '回款流入']
				},
				series: [{
					name: '资金流入占比',
					type: 'pie',
					radius: ['50%', '70%'],
					avoidLabelOverlap: false,
					center: ['50%', '60%'],
					data: [{
						value: 1640,
						name: '票据汇兑流入'
					}, {
						value: 890,
						name: '融资收入'
					}, {
						value: 1234,
						name: '借款'
					}, {
						value: 228.61,
						name: '营业外收入'
					}, {
						value: 3548,
						name: '回款流入'
					}],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart3.setOption(option);
		</script>

		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div class="team" id="main4" style="height:400px"></div>

		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<!--<div class="team" id="main5" style="height:600px"></div>-->
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart5 = echarts.init(document.getElementById('main5'));

			// 指定图表的配置项和数据
			//app.title = '嵌套环形图';

			var option = {
				title: {
					text: '资金流出类型占比',
					subtext: '一润供应链',
					x: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: ['融资付款', '销售费用', '税金', '其他现金支出', '财务费用', '管理费用分摊', '金融资金返还', '其他']
				},
				series: [{
					name: '资金流入占比',
					type: 'pie',
					radius: ['50%', '70%'],
					avoidLabelOverlap: false,
					center: ['50%', '60%'],
					data: [{
						value: 1640,
						name: '融资付款'
					}, {
						value: 890,
						name: '销售费用'
					}, {
						value: 1234,
						name: '税金'
					}, {
						value: 228.61,
						name: '其他现金支出'
					}, {
						value: 3548,
						name: '财务费用'
					}, {
						value: 1234,
						name: '管理费用分摊'
					}, {
						value: 228.61,
						name: '金融资金返还'
					}, {
						value: 3548,
						name: '其他'
					}],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart5.setOption(option);
		</script>

		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div class="team" id="main6" style="height:400px"></div>

		<!--footer-->
		<div class="footer">
			<ul class="social">
				<li>
					<a href="#"><i> </i></a>
				</li>
				<li>
					<a href="#"><i class="ic"> </i></a>
				</li>
				<li>
					<a href="#"><i class="ic1"> </i></a>
				</li>
				<li>
					<a href="#"><i class="ic2"> </i></a>
				</li>
				<li>
					<a href="#"><i class="ic3"> </i></a>
				</li>
			</ul>
			<div class="footer-b">
				<ul class="footer-nav">
					<li>
						<a href="javascript:void(0);" class="scroll active">一润魔方</a>
					</li>
				</ul>
				<a href="#header" class="scroll bottom"><i></i></a>
			</div>
			<div class="copy">
				<p class="footer-grid">Copyright &copy; 2016.一润 All rights reserved.
					<a target="_blank" href="#">一润魔方</a>
				</p>
			</div>
		</div>
		<!-- for bootstrap working -->
		<script src="../login/js/bootstrap.min.js"></script>
		<!-- //for bootstrap working -->

		<script type="text/javascript" src="../../../js/jquery-1.11.1.min.js"></script>
		<script src="../../../component/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../../../js/seajs/sea.js"></script>
		<script type="text/javascript" src="../../../js/seajs/seajs-text.js"></script>
		<script type="text/javascript" src="../../../js/seajs/seajs-css.js"></script>
		<script type="text/javascript" src="../../../js/bord/config.js"></script>
		<script type="text/javascript" src="../../../js/juicer-min.js"></script>

		<script type="text/javascript">
			seajs.use('./loansDetail', function(loansDetail) {
				loansDetail.init();
			});
		</script>

	</body>

</html>